import React, { useState } from'react';
import './style.css';
import { useNavigate } from 'react-router-dom';
function OrderSuccessPage() {
    const navigate = useNavigate();
    const [orderData] = useState({
        orderNumber: '64589456491',
        product: {
            name: '创意卫浴五件套 欧式高档卫生间洗漱...',
            price: 200,
            quantity: 2,
            image: 'http://t14.baidu.com/it/u=1293879872,303967190&fm=224&app=112&f=JPEG?w=500&h=5001'
        },
        delivery: {
            logistics: 'OMINI物流',
            deliveryTime: '预计8月7日（两天后）送达'
        },
        receiver: {
            name: 'OMINI.BASS',
            phone: '18801525595',
            note: '需要包装盒，谢谢！'
        }
    });

    return (
        <div className="order-success-page">
            <h1>支付成功</h1>
            <OrderDetail order={orderData} />
            <DeliveryDetail delivery={orderData.delivery} />
            <ReceiverDetail receiver={orderData.receiver} />
            <button className="back-to-home-btn" onClick={() => navigate('/shou')}>返回首页</button>
        </div>
    );
}

function OrderDetail({ order }) {
    return (
        <div className="order-detail">
            <h2>订单详情</h2>
            <p>订单编号：{order.orderNumber}</p>
            <div className="product-info">
                <img src={order.product.image} alt={order.product.name} className="product-image" />
                <div className="product-text">
                    <p>{order.product.name}</p>
                    <p>
                        <span className="original-price">{order.product.price}币</span>
                        <span className="discount-price">-250币</span>
                        <span className="quantity">X{order.product.quantity}</span>
                        <span className="total-price">{order.product.price * order.product.quantity}币</span>
                    </p>
                </div>
            </div>
        </div>
    );
}

function DeliveryDetail({ delivery }) {
    return (
        <div className="delivery-detail">
            <h2>配送详情</h2>
            <p>配送物流：{delivery.logistics}</p>
            <p>送货时间：{delivery.deliveryTime}</p>
        </div>
    );
}

function ReceiverDetail({ receiver }) {
    return (
        <div className="receiver-detail">
            <h2>收货人详情</h2>
            <p>取货人：{receiver.name}</p>
            <p>联系电话：{receiver.phone}</p>
            <p>备注：{receiver.note}</p>
        </div>
    );
}

export default OrderSuccessPage;